<template>
  <Header :addTodos="addTodos" />
  <List :todos="todos" :deletTodos="deletTodos" :updataTods="updataTods" />
  <Footer :todos="todos" :checkAll="checkAll" :filterTodos="filterTodos" />
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import List from './components/List.vue'
import { Todo } from './index'
export default defineComponent({
  name: 'APP',
  components: {
    Header,
    Footer,
    List
  },
  setup () {
    const state = reactive<{ todos: Todo[] }>({
      todos: [
        { id: 1, title: '宝马', iscompleted: false },
        { id: 1, title: '本田', iscompleted: true },
        { id: 1, title: '奔驰', iscompleted: false }
      ]
    })
    // 向list数组中添加元素
    const addTodos = (todo: Todo) => {
      state.todos.unshift(todo)
    }
    // 删除list数组中的元素
    const deletTodos = (index: number) => {
      state.todos.splice(index, 1)
    }
    // 修改list里面的item中的iscompleted的状态
    const updataTods = (todos: Todo, iscompleted: boolean) => {
      todos.iscompleted = iscompleted
    }
    // 全选的方法
    const checkAll = (iscompleted: boolean) => {
      state.todos.forEach(todo => {
        todo.iscompleted = iscompleted
      })
    }
    // 筛选List中的iscompleted为false的不用
    const filterTodos = () => {
      state.todos = state.todos.filter(todo => {
        return todo.iscompleted === false
      })
    }
    return {
      ...toRefs(state),
      addTodos,
      deletTodos,
      updataTods,
      checkAll,
      filterTodos
    }
  }
})
</script>
<style scoped lang="less"></style>
